<template>
  <!-- 添加电子印章  -->
  <pageHeader :title="title" :breadCrumb="breadCrumb" :isShowBtn="false">
    <template #buts>
      <a-button @click="cancel">
        <template #default>取消</template>
      </a-button>
      <a-button html-type="submit" @click="handleSubmit" type="primary">
        <template #default>确认</template>
      </a-button>
    </template>
  </pageHeader>
  <div class="content">
    <a-space
      align="center"
      style="backgroundcolor: var(--color-fill-2); padding: 10px"
    >
      <div>
        <a-form
          auto-label-width
          :model="form"
          :style="{ width: '1000px' }"
          ref="refss"
          @submit="handleSubmit"
        >
          <!-- 印章名称 -->
          <a-form-item
            :field="form.name.name"
            :label="form.name.label"
            :show-colon="true"
            :rules="[
              { required: false, message: '名称不能为空！' },
              { minLength: 5, message: 'must be greater than 5 characters' }
            ]"
          >
            <a-input
              v-model="form.name.value"
              placeholder="please enter your username..."
            />
          </a-form-item>
          <!-- 印章类型 -->
          <a-form-item
            :field="form.type.name"
            :label="form.type.label"
            :show-colon="true"
            :rules="[{ required: false, message: '类型是必选项！' }]"
          >
            <a-select v-model="form.type.code" placeholder="印章类型">
              <a-option
                v-for="item in StypeData"
                :value="item.code"
                :key="item.id"
                :label="item.value"
                >{{ item.value }}</a-option
              >
            </a-select>
          </a-form-item>
          <!-- 印章章面 -->
          <a-form-item
            field="isRead"
            :label="form.surface.label"
            :show-colon="true"
            :rules="[{ required: false, message: '章面属性不能为空！' }]"
          >
            <a-space direction="vertical">
              <div style="padding: 6px; width: 100%">
                <span>请选择印章规格：</span>
                <a-tooltip
                  content="选择您的章印的实际尺寸以确保电子章和实体章签署后的大小一致"
                  position="right"
                  background-color="#fffff"
                >
                  <icon-info-circle-fill />
                </a-tooltip>
              </div>
              <!-- 印章规格 -->
              <a-cascader
                :path-mode="true"
                ref="type"
                v-model="form.specs.value"
                :options="SspecsData"
                placeholder="印章规格"
              />
            </a-space>
          </a-form-item>
          <!--  -->
          <a-form-item>
            <a-space direction="vertical">
              <span>上传印章图片</span>
              <div>
                <a-space
                  ><icon-exclamation-circle />
                  <span style="font-size: 10px"
                    >请将印章的扫描件或照片(建议使用实体印章章面扫描仪)，去掉背景保存为PNG格式文件</span
                  ></a-space
                >
              </div>
              <a-upload
                :limit="1"
                @change="Fileupload"
                draggable
                action="/"
                accept="image/jpg , image/png , image/webp"
              />
            </a-space>
          </a-form-item>
          <!-- 印章使用人 -->
          <a-form-item
            :field="form.User.name"
            :label="form.User.label"
            :show-colon="true"
          >
            <a-input-tag
              @press-enter="bbb"
              v-model="form.User.value"
              :style="{ width: '320px' }"
              placeholder="Please Enter"
              allow-clear
            />
          </a-form-item>
        </a-form>
      </div>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import {
    GetSealtype,
    GetSealspecs,
    addElectronicseal
  } from '@/api/contract-management/base-setting/E-signature/index';

  const router = useRouter();
  const title: string = '添加电子印章';
  const refss = ref();
  const type = ref();
  // const handleSelect = () => {};
  // const ZhandleSelect = () => {};
  const breadCrumb: string[] = [
    '合同管理',
    '基础设置',
    '电子签章',
    '添加电子印章'
  ];

  const form = reactive({
    name: {
      name: '名称',
      value: '',
      label: '印章名称'
    },
    type: {
      name: '类型',
      code: '',
      label: '印章类型'
    },
    surface: {
      name: '章面',
      value: '',
      label: '印章章面'
    },
    specs: {
      name: '规格',
      value: '',
      label: '印章规格'
    },

    User: {
      name: '使用人',
      label: '印章使用人',
      inpvalue: '',
      value: ['111']
    },
    picture: {
      name: '图片',
      label: '印章图片',
      value: ''
    }
  });

  // 前
  // const handleSubmit = async () => {
  //   const addVal = refss.value.model;
  //   const Datas = {
  //     name: addVal.name.value,
  //     pic_addr: addVal.picture.value,
  //     user: addVal.User.value.join('-'),
  //     shape: addVal.specs.value[0],
  //     size: `${addVal.specs.value[0]}_${addVal.specs.value[1]}`,
  //     type: addVal.type.code,
  //   };
  //   const res = await addElectronicseal(Datas);
  //   router.go(-1);
  // };
  // 后，解构
  const handleSubmit = async () => {
    const { name, picture, User, specs, type } = refss.value.model;
    const size = `${specs.value[0]}_${specs.value[1]}`;
    const Datas = {
      name: name.value,
      pic_addr: picture.value,
      user: User.value.join('-'),
      shape: specs.value[0],
      size,
      type: type.code
    };
    await addElectronicseal(Datas);
    router.go(-1);
  };

  const cancel = () => router.go(-1);

  const StypeData: any = ref([]);
  const getStype = async () => {
    // const res = await GetSealtype();
    // StypeData.value = res;
    //
    StypeData.value = await GetSealtype();
  };
  getStype();

  const SspecsData: any = ref([]);
  const getSspecs = async () => {
    const data = await GetSealspecs();
    // 前
    SspecsData.value = JSON.parse(
      JSON.stringify(data).replace(/code/g, 'value')
    );
    // 使用map()方法
    // SspecsData.value = data.map((item) => ({ ...item, value: item.code }));
  };
  getSspecs();

  const Fileupload = (e: any) => {
    form.picture.value = e[0].url;
  };
</script>

<style scoped lang="less">
  // padding: 16px;
  .content {
    margin-top: 40px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .arco-btn {
      width: 100%;
    }
    .arco-icon {
      font-size: 16px;
    }
  }
</style>
